<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--登录</TITLE>
	<Link rel="stylesheet" type="text/css" href="style/style.css"/>
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>


</HEAD>

<BODY>
	<div id = "app">
		<bbs ref="a">
			<br/>
			<!--      导航        -->
			<DIV>
				&gt;&gt;<B><a href="index.html">论坛首页</a></B>
			</DIV>
			<!--      用户登录表单        -->
			<DIV class="t" style="MARGIN-TOP: 15px" align="center">
				<FORM name="loginForm" action="" method="post"
					  style="display: grid; grid-template-columns: 100px 200px auto; gap: 10px; width: 600px">
					<label for="">用户名</label>
					<INPUT class="input" tabIndex="1"  type="text"      maxLength="20" size="35" v-model="uname">
					<span style="color: red; text-align: left">{{unameError}}</span>
					<label for="">密　码</label>
					<INPUT class="input" tabIndex="2"  type="password"  maxLength="20" size="40" v-model="upass">
					<span style="color: red; text-align: left">{{upassError}}</span>
					<label for=""></label>
					<div>
						自动登录时间:
						<select v-model="autoTime">
							<option value=""></option>
							<option value="1">一天</option>
							<option value="2">七天</option>
							<option value="3">一个月</option>
						</select>
						<INPUT class="btn"  tabIndex="6"  type="submit" value="登 录" @click.prevent="login">
						<INPUT class="btn"  tabIndex="6"  type="submit" value="忘记密码" @click.prevent="seekInfo">
					</div>
					<span></span>
				</FORM>
			</DIV>
		</bbs>
	</div>
</BODY>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			uname:"",
			upass:"",
			unameError:"",
			upassError:"",
			autoTime: 1
		},
		created() {},
		methods : {
			login(){
				// @click.prevent 抑制默认行为
				let p = new URLSearchParams();
				p.append("uname", this.uname)
				p.append("upass", this.upass)
				p.append("autoTime", this.autoTime)
				axios.post("user/login", p).then(res=>{
					this.unameError = "";
					this.upassError = "";
					if(res.data.code == 1){
						this.$message("登陆成功")
						this.$refs.a.myinfo = res.data.data;
						if (res.data.data.requestURL) {
							location.href=res.data.data.requestURL;
						}else{
							location.href = "index.html";
						}
					}else{
						this.$alert("登陆失败")
						console.log(res.data.data);
						res.data.data.forEach(err=>{
							if (err.field == "uname") {
								this.unameError += err.defaultMessage + ";";
							}else if (err.field == "upass") {
								this.upassError += err.defaultMessage + ";";
							}
						});
					}
				})
			}
		}
	})
</script>
</HTML>
